<template>
  <div class="flex flex-wrap">
    <div class="flex w-full">
      <Select
        style="width: 100%; margin-right: 5px"
        v-model:value="newRecord.minT"
        :options="minTList"
        allow-clear
      />
      <Select
        style="width: 100%"
        v-model:value="newRecord.minV"
        :options="minVList"
        v-if="minVList?.length"
        allow-clear
        placeholder="最小值"
      />
      <InputNumber v-else v-model:value="newRecord.minV" />
    </div>
    <div class="flex mt-2 w-full">
      <Select
        style="width: 100%; margin-right: 5px"
        v-model:value="newRecord.maxT"
        :options="maxTList"
        allow-clear
      />
      <Select
        style="width: 100%"
        v-model:value="newRecord.maxV"
        :options="minVList"
        v-if="maxVList?.length"
        allow-clear
        placeholder="最大值"
      />
      <InputNumber v-model:value="newRecord.maxV" v-else />
    </div>
  </div>
</template>
<script lang="ts" setup>
  // import { pluginManager } from '/@/views/formDesigner/utils';
  import { computed, PropType, watch, ref } from 'vue';
  import { Select, InputNumber } from 'ant-design-vue';
  // const Number = pluginManager.getComponent('number');
  // const Select = pluginManager.getComponent('select');
  const props = defineProps({
    modelValue: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
    record: {
      type: Object as PropType<Object>,
      default: () => {
        return {};
      },
    },
    minTList: {
      type: Array,
      default: () => [],
    },
    maxTList: {
      type: Array,
      default: () => [],
    },
    minVList: {
      type: Array,
      default: () => [],
    },
    maxVList: {
      type: Array,
      default: () => [],
    },
  });

  const emit = defineEmits(['update:modelValue']);
  const newRecord = ref<Recordable>({
    minT: null,
    minV: null,
    maxT: null,
    maxV: null,
  });
  // const newRecord: Recordable = computed({
  //   get() {
  //     console.log('props', props);
  //     console.log('props.modelValue', props.modelValue);
  //     return props.modelValue;
  //   },
  //   set(e) {
  //     console.log('eee', e);
  //     emit('update:modelValue', e);
  //   },
  // });
  const minTList = computed(() => props.minTList ?? []);
  const maxTList = computed(() => props.maxTList ?? []);

  const minVList = computed(() => props.minVList ?? []);
  const maxVList = computed(() => props.maxVList ?? []);

  watch(
    () => props.modelValue,
    (newVal) => {
      newRecord.value = newVal;
      console.log('newRecord.value', newRecord.value);
    },
    {
      immediate: true,
    },
  );
  watch(
    () => [newRecord.value.minT, newRecord.value.minV, newRecord.value.maxT, newRecord.value.maxV],
    () => {
      console.log('record', props.record);
      emit('update:modelValue', newRecord.value);
    },
  );
</script>
